<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title>创建word文档</title>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/umeditor1.2.3-src/themes/default/_css/umeditor.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">


    <!--<link rel="stylesheet" href="/statics/css/email/send.css?t=1">-->

    <style>
        .table-my-box {
            padding: 10px 15px;
            background: #f7f8fa;
        }

        .table-my {
            width: 100%;
        }

        .table-my .title {
            width: 60px;
            height: 34px;
            line-height: 34px;
            text-align: left;
        }

        .table-my .value {
            padding: 5px 0;
        }

        .webuploader-container {
            width: 60px;
            position: relative;
            margin-top: 15px;
        }

        #divUploadedFiles {
            padding: 20px 10px;
            border: 1px dashed #ddd;
            width: 50%;
        }

        .webuploader-container {
            position: relative;
            /* margin-top: 15px; */
            height: 32px;
            margin-top: -9px;
        }

        .divUploadedFiles {
            width: 480px;
            float: left;
        }

        .divUploadedFiles .fj-tanzhongStyle {
            float: left;
            width: 300px;
            margin-top: 2px;
            overflow: hidden;
        }

        .delfile {
            cursor: pointer;
            margin-left: 5px;
        }

        .webuploader-pick {
            background: url(/dist/img/fjT1.png) no-repeat 5px center;
            display: block;
            padding: 0 4px;
            height: 22px;
            line-height: 22px;
            padding-left: 15px;
            margin: 0 auto;
            width: 79px;
            margin-top: 13px;
            border-radius: 4px;
        }
        table{
            border:none;
        }
        .webuploader-pick-hover {
            color: #fff !important;
            background: url(/dist/img/fjT2.png) no-repeat 5px center;
            background-color: #0F6099;

        }

        #divUploadedFiles {
            /*padding: 4px;*/
            padding-bottom: 0;
            overflow: hidden;
        }

    </style>
</head>
<body style="background-color:#fff">
<section class="content" id="app">
    <div class="box-body no-padding  iframeH" style="overflow: auto;background: #fff;">
        <div class="box-body">
            <div class="table-my-box">
                <table cellspacing="0" class="table-my">
                    <tbody>
                    <tr>
                        <td class="title">
                            文档名称
                        </td>
                        <td class="value">
                            <input type="text" class="form-control" id="txtSubject" v-model="docMain.docName">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="padding-bottom: 5px;">
                            <div class="title pull-left">公&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;司</div>
                            <div class="pull-left" style="width: 200px;">
                                <select id="selectCompany" class="form-control"
                                        style="    width: 100%;font-size: 12px;line-height: 25px;padding-top: 0px;padding-bottom: 0px;padding-left: 6px;"
                                        v-model="docMain.companyId">
                                    <option value="请选择">请选择</option>
                                    <option v-for="item in companyList" v-bind:value="item.id">{{item.name}}</option>
                                </select>
                            </div>
                            <div class="title pull-left" style="margin-left: 20px;">部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门</div>
                            <div class="pull-left" style="width: 200px;">
                                <select id="selectBM" class="form-control"
                                        style="    width: 100%;font-size: 12px;line-height: 25px;padding-top: 0px;padding-bottom: 0px;padding-left: 6px;"
                                        v-model="docMain.departName">
                                    <option class="form-control" value="">请选择</option>
                                    <option class="form-control" value="销售部">销售部</option>
                                    <option class="form-control" value="服务部">服务部</option>
                                    <option class="form-control" value="其他">其他</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="title" style="padding-bottom: 5px;">
                            文档附件
                        </td>
                        <td style="padding-bottom: 5px;">
                            <div class="divUploadedFiles form-control"
                                 style="padding-left: 8px;padding-top: 0px;padding-bottom: 0px;">
                                <div class="fj-tanzhongStyle  " v-if="docMain.attachName"
                                     style="width: 82%">
                                    <b :class="fjStyle(docMain.attachName)"></b>
                                    <div class="name" v-if="docMain.attachName" style="width:88%;"
                                         title="docMain.attachName">{{docMain.attachName}}
                                    </div>
                                    <!--删除借用下载的样式，因为他们没有写下载-->
                                    <div class="down"><a href="javascript:void(0)" class="nui-txt-link"
                                                        v-on:click="deleteFile">删除</a></div>
                                    <!--<div class="info"><span class="nui-txt-suc">上传完成</span></div>-->
                                </div>
                                <div id="divUpload" style="width: 100px;float:right;width: 16%">添加附件
                                </div>

                            </div>
                            <input type="button" value="历史文档" class="btn oaBtn btn-sm pull-right"
                                   style="margin-left: 10px;margin-top: 10px;" @click="lookHistory">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="box-body">
            <textarea id="emailContent" style="width:100%;height:400px;padding:10px;padding-left:20px;"
                      v-model="docMain.source"></textarea>
        </div>
        <div class="form-group text-center">
            <input type="button" id="btnDraft" @click="createFile" class="btn oaBtn btn-sm" value="保存"
                   style="margin-top: 5px;"/>
            <div class="clearfix"></div>
        </div>
    </div>


</section>

<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="/dist/js/pages/editor_api.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/plugins/umeditor1.2.3-src/third-party/template.min.js"></script>
<script src="/dist/plugins/umeditor1.2.3-src/umeditor.config.js"></script>
<script src="/dist/plugins/umeditor1.2.3-src/lang/zh-cn/zh-cn.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script src="/dist/plugins/select2/select2.full.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<!--oa自定义  JS-->
<script>
    var vueApp = new Vue({
        el: '#app',
        data: {
            currentUser: getCurrentUser(),
            type: '',
            editor: null,
            companyList: [],
            attachHistoryList: [],
            attachHistoryListLength: '',
            fileId: $.wyui.page.urlParams.fileId,
            docMain: {
                attachName: "",
                attachUrl: "",
                companyId: "",
                companyName: "",
                departName: "",
                docName: "",
                id: "",
                imageName: "",
                imageUrl: "",
                screenType: "0",
                source: "",
                fkTypeId: "20180423190945C4BFA747C7648C57DF",
                typeName: "",
                userName: "",
                createUserId: getCurrentUser().id,
                delFlag: "0"
            }
        },
        methods: {
            lookHistory: function () {
                var that = this;
                $.dialog({
                    content: 'url:historyFile.html?fileId=' + that.fileId,
                    title: '查看历史文档',
                    width: 300,
                    height: 400,
                    max: true,
                    min: true,
                    lock: true
                });
            },
            deleteFile: function () {
                if (window.confirm("确定要删除该附件吗?")) {
                    this.docMain.attachName = '';
                    this.docMain.attachUrl = '';
                }
            },
            fjStyle: function (fjName) {
                if (fjName) {
                    var type = fjName.substring(fjName.lastIndexOf('.') + 1);
                    return 'img fj-' + type
                }
                return 'img'
            },
            createFile: function () {
                var that = this;

                if (this.docMain.docName == "") {
                    alert("请输入文档名称！");
                    return;
                }
                if (this.docMain.companyId == "") {
                    alert("请选择公司！");
                    return;
                }
                if (this.docMain.departName == "") {
                    alert("请输入部门！");
                    return;
                }
                this.docMain.source = this.editor.getContent();
                if (this.docMain.source == "") {
                    alert("文档内容不能为空！");
                    return;
                }
                that.attachHistoryList.push({
                    "attachName": that.docMain.attachName,
                    "attachUrl": that.docMain.attachUrl
                });
                $.wyui.postMethod(urlConfig.main.save, trimRN({
                    attachHistoryList: that.attachHistoryList,
                    docMain: that.docMain
                }), function (r) {
                    alert("保存成功！");
                    var pageId = top.getActivePageId();
                    //刷新列表
                    top.refreshTabById("201804271030453EBD5F5F2768074201");
                    top.closeTabByPageId(pageId);
                    parent.app.sel();
                })

            }
        },
        mounted: function () {
            var that = this;
            //初始化上传控件
            this.uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: "/statics/plugin/webuploader-0.1.5/Uploader.swf",
                // 文件接收服务端。
                server: "http://39.106.135.205/jsyf-oa" + "/attach/uploadFile.json",
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#divUpload',
                duplicate: true
            });
            this.uploader.on("uploadStart", function () {
                $("#progress").show();
            });
            this.uploader.on("uploadComplete", function () {
                $("#progress").hide();
            });
            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            this.uploader.on('uploadSuccess', function (file, response) {
                that.docMain.attachName = response.name;
                that.docMain.attachUrl = response.url;
            });
            // 文件上传失败，显示上传出错。
            this.uploader.on('uploadError', function (file) {
                alert("上传失败！");
            });
            //获取公司下拉框
            $.wyui.postMethod(urlConfig.system.company.getCompanyList, {}, function (r) {
                console.log(r);
                that.companyList = r;
            });
            this.editor = UM.getEditor('emailContent');
            //判断是否有传过来的fileId
            var that = this;
            if ($.wyui.page.urlParams.fileId) {
                $.wyui.postMethod(urlConfig.main.getMainDetail, {id: $.wyui.page.urlParams.fileId}, function (r) {
                    that.attachHistoryList = r.attachHistoryList;
                    that.attachHistoryListLength = that.attachHistoryList.length;

                    that.docMain = r.docMain;
                    that.editor.setContent(that.docMain.source);
                });
            }
        }
    });

</script>

</body>
</html>